<template>
  <div class="box">
    <Header />
    <!-- <div class="header">
      <div class="title">
        <div class="left">c2rusHub</div>
        <div class="right">译码方舟社区</div>
      </div>
    </div>-->
    <div class="content">
      <div class="search">
        <el-input v-model="search" style="width:600px;height:50px" placeholder="请输入搜索内容"></el-input>
        <div class="btn">
          <img
            src="../assets/search.png"
            alt
            style="width:90px;height:35px; cursor: pointer;margin-right:10px"
            @click="searchF"
          />
          <img
            src="../assets/money.png"
            alt
            style="width:90px;height:35px; cursor: pointer;"
            @click="goToTask"
          />
          <!-- <el-button size="large" type="primary" @click="searchF">搜索</el-button>
          <el-button size="large" type="danger" @click="goToTask()">悬赏</el-button>-->
        </div>
      </div>
      <div class="info">
        <LeftSidebar />
        <!-- 引用左侧导航组件 -->
        <div class="searchInfo">
          <div class="tile">
            <span>搜索到的列表:</span>
            <span>{{ resList.length }}条相似结果</span>
          </div>
          <div class="card" v-if="resList.length">
            <ul>
              <li v-for="(item,index) in resList" :key="index" @click="jump(item.id)">
                <div style="fold">{{ item.rustUrl }}</div>
                <div class="info-item">
                  <span><img src="../assets/likes.png" alt="">likes&nbsp;&nbsp;{{ item.likes }}</span>
                  <span><img src="../assets/diss.png" alt="">diss&nbsp;&nbsp;{{ item.diss }}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="img" v-else>
            <img
              src="https://img0.baidu.com/it/u=16716973,1274530491&fm=253&fmt=auto&app=138&f=PNG?w=449&h=304"
              alt
            />
          </div>
          <div class="task" v-if="!resList.length && flag">
            <!-- <img src="../assets/task.png" alt /> -->
            <el-button @click="goTask" type="primary">查看任务</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import router from '../router'
import Header from './components/header.vue'
import { ref } from 'vue'
import LeftSidebar from './components/LeftSidebar.vue'
import { userApi } from '@/api/user'

let resList = ref([])
let search = ref()
let flag = ref(false)
const jump = id => {
  router.push({ path: '/detail', query: { id, source: search.value } })
}
const searchF = async () => {
  let res = await userApi.search(search.value)
  if (res.meta.code == '2000') {
    flag.value = true
    resList.value = res.data
  }
  console.log(res, 'eeeeee')
}
const goTask = () => {
  router.push({ path: '/lookTask', query: { name: search.value } })
}
const goToTask = () => {
  router.push({ name: 'task' })
}
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;

  // background: #ddd;

  .content {
    width: 80%;
    min-width: 1200px;
    margin: 0 auto;
    height: 30px;
    padding: 20px;
    .img {
      width: 100%;
      text-align: center;
      img {
        margin: 0 auto;
      }
    }
    .search {
      width: 800px;
      margin: 0 auto;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }
    .info {
      width: 100%;
      min-height: 600px;
      background: #f7f8fa;
      margin-top: 20px;
      border-radius: 20px;
      display: flex;
      justify-content: space-between;
      .list {
        width: 15%;
        min-height: 600px;
        background: #e5f2f5;
        border-radius: 20px;
        padding: 20px;
        ul {
          padding: 0;
          background: #a5c9ed;
          min-height: 500px;
          border-radius: 10px;
          li {
            list-style: none;
            line-height: 30px;
            padding: 0 20px;
          }
        }
      }
      .searchInfo {
        width: 80%;
        min-height: 600px;
        padding: 20px;
        .tile {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #ddd;
          padding-bottom: 20px;
          font-weight: bold;
        }
        .card {
          margin-top: 20px;
          width: 95%;
          height: 85%;
          // background: #cbedef;
          border-radius: 10px;
          ul {
            padding: 20px;
            li {
              list-style: none;
              line-height: 30px;
              padding: 0 20px;
              border-bottom: 1px solid #ddd;
              cursor: pointer;
              &:hover {
                background: #f7f8fa;
              }
              .info-item{
                color:#adadad;
                img{
                  width: 10px;
                  height: 10px;
                }
                span{
                  margin-right: 50px;
                }
              }
            }
          }
        }
        .task {
          display: flex;
          justify-content: flex-end;
          margin-top: 30px;
        }
      }
    }
  }
}
</style>
